<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <style type="text/css">
        textarea {
            border: medium solid black;
            background-color: lightgrey;
            background-image: url(../images/banana.png);
            /* background-size宽/高 */
            background-size: 60px 60px;
            /* 水平、竖直方向重复 */
            background-repeat: repeat;
            /* 左 上 右 下 
                将背景图像定位到盒子的某边界
            */
            background-position: 30px 10px;
            /* 加入padding与margin实验后，可知定位到盒子的边界是算到padding在内的
                也就是内边距，设置了内边距要把内边距也算上
            padding: 10px;
            margin: 10px;
             */
             /* scroll 背景固定到元素上 不随着textarea滚动一起滚动 local/fixed */
            background-attachment: scroll;
        }
        p {
            border: 10px double black;
            background-color: lightgrey;
            background-image: url(../images/banana.png);
            /* background-size宽/高 */
            background-size: 40px 40px;
            /* 水平、竖直方向重复 */
            background-repeat: repeat;
            /* 左 上 右 下 
                将背景图像定位到盒子的某边界
            */
            /* background-position: 30px 10px;  */
            /* 加入padding与margin实验后，可知定位到盒子的边界是算到padding在内的
                也就是内边距，设置了内边距要把内边距也算上
            padding: 10px;
            margin: 10px;
             */
             /* 组合使用 */
            background-origin: border-box;
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <p>
        There are lots of different kinds of fruit - there are over 500 varieties
        of banana alone. By the time we add the countless types of apples, oranges,
        and other well-known fruit, we are faced with thousands of choides.
    </p>

    <!-- <p>
        <textarea cols="30" rows="8">
            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choides.
        </textarea>
    </p> -->
</body>

</html>